<template>
  <div class="work-area-box">
    <div
      v-for="item in data"
      :key="item.id"
      :class="['work-area-box-items', areaId == item.id ? 'active' : '']"
      :style="{ borderColor: areaId == item.id ? '#fff' : 'transparent' }"
      @click="onChangeArea(item.id)"
    >
      <div class="name">
        <img src="@/assets/images/bigScreen/icon/addren.png" alt="">
        <span>{{ item.name }}</span>
      </div>
      <div class="number">
        {{ item.number }}<span>个</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    areaId: {
      type: [String,Number],
      default: '',
    }
  },
  methods: {
    onChangeArea(id) {
      this.$bus.$emit('updateArea',id);
    },
  },
}
</script>
<style lang="scss" scoped>
.work-area-box {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  /* Firefox 的滚动条宽度 */
  scrollbar-width: thin; /* 'auto' | 'thin' */
  /* Firefox 的滚动条颜色 */
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1); /* 滑块颜色 轨道颜色 */
  &::-webkit-scrollbar {
    /* 滚动条宽度 */
    width: 1px; /* 垂直滚动条宽度 */
    height: 1px; /* 水平滚动条高度 */
  }
  &::-webkit-scrollbar-thumb {
    /* 滚动条滑块 */
    background-color: rgba(0, 0, 0, 0.2); /* 透明黑色 */
    border-radius: 1px; /* 滑块圆角 */
  }
  &::-webkit-scrollbar-track {
    /* 滚动条轨道 */
    background-color: rgba(0, 0, 0, 0.1); /* 透明黑色 */
  }

  &-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 42px;
    background: linear-gradient( 180deg, rgba(10,85,160,0.24) 0%, rgba(39,105,235,0) 100%);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid rgba(11,81,160,0.5);
    cursor: pointer;
    margin-bottom: 9px;
    padding: 0 18px;
    color: #4EFCFE;
    font-size: 15px;

    .name {
      display: flex;
      align-items: center;
      color: #fff;
      img {
        height: 25px;
        object-fit: cover;
        vertical-align: top;
        margin-right: 11px;
      }
    }
    .number {
      span {
        color: #fff;
      }
    }

    &.active {
      background: linear-gradient( 179deg, #074786 0%, #1D84B6 100%);
      border-color: rgba(255,255,255,0.5);
      .number {
        color: #fff;
      }
    }
  }
}
</style>
